.container{
    display: grid;
    grid-template-columns: repeat(36,1fr);
    grid-template-rows: 40px 100px 700px 100px 300px 300px 100px 100px 50px 100px 400px 400px 600px 300px;
}
.A{
    grid-column: 1/-1;
    background-color: rgb(4, 4, 75);
}
.B{
    grid-column: 1/-1;
    background-color: darkblue;
}
.C{
    grid-column: 1/-1;
    margin-bottom: 40px;
    background-color: darkorange;
}
.D{
    grid-column: 1/-1;
    background-color: darkseagreen;
}
.E1{
    margin-top: 10px;
    margin-bottom: 30px;
    margin-left: 100px;
    margin-right: 10px;
    grid-column: 1/10;
    background-color: darkturquoise;
}
.E2{
    margin-top: 10px;
    margin-bottom: 30px;
    margin-left: 10px;
    margin-right: 10px;
    grid-column: 10/19;
    background-color: dodgerblue;
}
.E3{
    margin-top: 10px;
    margin-bottom: 30px;
    margin-left: 10px;
    margin-right: 10px;
    grid-column: 19/28;
    background-color: greenyellow;
}
.E4{
    margin-top: 10px;
    margin-bottom: 30px;
    margin-left: 10px;
    margin-right: 100px;
    grid-column: 28/-1;
    background-color: hotpink;
}
.F1{
    margin-left: 100px;
    margin-right: 10px;
    margin-bottom: 50px;
    grid-column: 1/13;
    background-color: khaki;
}
.F2{
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 50px;
    grid-column: 13/25;
    background-color: black;
}
.F3{
    margin-left: 10px;
    margin-right: 100px;
    margin-bottom: 50px;
    grid-column: 25/-1;
    background-color: blueviolet;
}
.G1{
    margin-bottom: 50px;
    grid-column: 1/5;
    background-color: rgb(10, 230, 193);
}
.G2{
    margin-bottom: 50px;
    grid-column: 5/9;
    background-color: rgb(4, 51, 59);
}
.G3{
    margin-bottom: 50px;
    grid-column: 9/13;
    background-color: rgb(236, 22, 22);
}
.G4{
    margin-bottom: 50px;
    grid-column: 13/17;
    background-color: rgb(41, 1, 221);
}
.G5{
    margin-bottom: 50px;
    grid-column: 17/21;
    background-color: rgb(218, 101, 24);
}
.G6{
    margin-bottom: 50px;
    grid-column: 21/25;
    background-color: rgb(196, 10, 165);
}
.G7{
    margin-bottom: 50px;
    grid-column: 25/29;
    background-color: rgb(21, 151, 91);
}
.G8{
    margin-bottom: 50px;
    grid-column: 29/33;
    background-color: rgb(44, 228, 27);
}
.G9{
    margin-bottom: 50px;
    grid-column: 33/-1;
    background-color: rgb(202, 184, 16);
}
.H1{
    grid-column: 1/10;
    background-color: darkmagenta;
}
.H2{
    grid-row:  8/10;
    grid-column: 10/22;
    background-color: rgb(124, 115, 124);
}
.H3{
    grid-row:  8/10;
    grid-column: 22/28;
    background-color: rgb(11, 36, 179);
}
.H4{
    grid-column: 28/-1;
    background-color: rgb(5, 167, 189);
}
.H5{
    grid-row: 9/11;
    grid-column: 1/10;
    background-color: rgb(4, 250, 189);
}
.H6{
    grid-column: 10/16;
    background-color: rgb(168, 233, 18);
}
.H7{
    grid-column: 16/28;
    background-color: rgb(92, 119, 240);
}
.H8{
    grid-row: 9/11;
    grid-column: 28/-1;
    background-color: rgb(248, 33, 4);
}
.I1{
    margin-top: 50px;
    margin-left: 100px;
    margin-right: 10px;
    margin-bottom: 50px;
    grid-column: 1/13;
    background-color: rgb(165, 19, 19);
}
.I2{
    margin-top: 50px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 50px;
    grid-column: 13/25;
    background-color: rgb(69, 192, 20);
}
.I3{
    margin-top: 50px;
    margin-left: 10px;
    margin-right: 100px;
    margin-bottom: 50px;
    grid-column: 25/-1;
    background-color: rgb(78, 7, 160);
}
.J1{
    margin-left: 100px;
    margin-right: 10px;
    margin-bottom: 50px;
    grid-column: 1/13;
    background-color: rgb(124, 112, 6);
}
.J2{
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 50px;
    grid-column: 13/25;
    background-color: rgb(201, 21, 21);
}
.J3{
    margin-left: 10px;
    margin-right: 100px;
    margin-bottom: 50px;
    grid-column: 25/-1;
    background-color: rgb(31, 8, 231);
}
.K{
    grid-column: 1/-1;
    background-color: darksalmon;
}
.L{
    margin-top: 50px;
    grid-column: 1/-1;
    background-color: dodgerblue;
}